<template>
	<gracePage statusBarBG="#EB5D4B" :headerHeight="0">
		<view slot="gHeader" class="grace-border-b">
			<graceHeader background="#FFFFFF" style="height: 88rpx;">
				<view class="grace-header-body">
					<!-- 返回按钮 -->
					<view class="grace-header-icons grace-icons icon-arrow-left" @tap="goback"></view>
					<!-- 中间内容 -->
					<view class="grace-header-content-noflex" style="margin-right: 50rpx;text-align: center;color: #333333;font-size: 30rpx;">设置</view>
				</view>
			</graceHeader>
		</view>
		<view slot="gBody" class="grace-body">
			<view class="grace-flex grace-columns grace-flex-vcenter grace-border-b" style="height: 350rpx;justify-content: center;"
			 @tap="selectImg">
				<image style="width: 180rpx;height: 180rpx;border-radius: 50%;" :src="memberinfo.imgurl?memberinfo.imgurl:'../../static/logo.png'"
				 mode=""></image>
				<text style="color: #EB5D4B;font-size: 28rpx;margin-top: 20rpx;">更换头像</text>
			</view>
			<view class="grace-list grace-margin-top" style="background-color: #FFFFFF;border-radius: 16rpx;">
				<view class="grace-list-items" @tap="editName">
					<view class="grace-list-body grace-border-b" style="margin-left: 0;">
						<view class="grace-list-title" style="margin: 0 20rpx;">
							<text class="grace-list-title-text">昵称:&nbsp;&nbsp;{{memberinfo.nickname}}</text>
							<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
						</view>
					</view>
				</view>
				<!-- <view class="grace-list-items">
					<view class="grace-list-body grace-border-b" style="margin-left: 0;">
						<view class="grace-list-title" style="margin: 0 20rpx;">
							<text class="grace-list-title-text">性别&nbsp;&nbsp;女</text>
							<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
						</view>
					</view>
				</view> -->
			</view>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from '../../graceUI/components/gracePage.vue';
	import graceHeader from '../../graceUI/components/graceHeader.vue';
	export default {
		data() {
			return {
				idCard1: "https://lanhu.oss-cn-beijing.aliyuncs.com/ps2cd8e5feb924c1f4-b826-4dcd-a986-c338a92b57db",
				memberinfo: {}
			};
		},
		onShow() {
			this.gRequest.get('/login/getmemberinfo', {
				member_id: JSON.parse(uni.getStorageSync("userInfo")).member_id
			}, res => {
				this.setData({
					memberinfo: res.data
				});
			});
		},
		methods: {
			goback: function() {
				uni.navigateBack({});
			},
			gotoaddinvoices: function() {
				uni.navigateTo({
					url: '../my/addInvoice'
				});
			},
			selectImg: function() {
				uni.chooseImage({
					count: 1,
					success: res => {
						this.memberinfo.imgurl = res.tempFilePaths[0];
						uni.uploadFile({
							url      : this.gRequest.apiUrl+'/login/upurlimg',
							filePath : res.tempFilePaths[0],
							name     : "imgurl",
							formData : {},
							header   : {},
							success  : (uploadRes) => {
								let resObj = JSON.parse(uploadRes.data)
								console.log(resObj)
								if(resObj.status==1) {
									this.gRequest.post('/login/saveimgurl', {
										imgurl: resObj.data,
										member_id: JSON.parse(uni.getStorageSync("userInfo")).member_id,
									}, "form", {}, res => {
										uni.showToast({
											title: "更新成功",
											icon: "none"
										})
									});
								}
							},
							fail    : (e) => {
								uni.showToast({title:"上传失败，请点击图片重试", icon:"none"});
								this.error(index);
								
							}
						})
						

					}
				});
			},
			editName: function() {
				uni.navigateTo({
					url: '../my/setUpNickname'
				});
			},
		},
		components: {
			gracePage,
			graceHeader
		}
	};
</script>
<style lang="scss" scoped>
	page {
		background: #ffffff;
	}

	.grace-body {
		padding: 0 45rpx !important;
		margin-top: 120rpx;
		width: 660rpx;
	}

	.user-info {
		width: 670rpx;
		height: 275rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 2rpx 5rpx 0rpx rgba(204, 204, 204, 0.3);
		border-radius: 16rpx;

		.user-data {
			height: 170rpx;
		}

		.address {
			height: 104rpx;
		}

		.edit {
			width: 100rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			border: 2rpx solid #eb5d4b;
			color: #eb5d4b;
			font-size: 28rpx;
			border-radius: 10rpx;
			margin-right: 35rpx;
		}
	}

	.add_btn {
		width: 120rpx;
		height: 60rpx;
		background-color: #eb5d4b;
		color: #ffffff;
		border-radius: 60rpx;
		text-align: center;
		line-height: 60rpx;
		margin-left: auto;
		margin-right: 35rpx;
	}

	.manage {
		width: 120rpx;
		height: 60rpx;
		background-color: #ffffff;
		color: #333333;
		border-radius: 60rpx;
		text-align: center;
		line-height: 60rpx;
		margin-right: 35rpx;
	}

	.invoices-list {
		width: 670rpx;
		background-color: #ffffff;
		box-shadow: 0px 2px 5px 0px rgba(204, 204, 204, 0.3);
		border-radius: 16px;

		.invoices-item {
			height: 96rpx;

			.content {
				margin-left: 30rpx;
				line-height: 96rpx;
				font-size: 28rpx;
				color: #666666;
			}

			.delete {
				margin-right: 30rpx;
				line-height: 96rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}

	.out-btn {
		width: 620rpx;
		height: 94rpx;
		margin-top: 140rpx;
		background: #eb5d4b;
		border-radius: 47rpx;
		text-align: center;
		line-height: 94rpx;
		color: #ffffff;
		font-size: 28rpx;
		margin-left: 20rpx;
	}
</style>
